<template>
  <div>
      <!-- 动画加载组件 -->
      <!-- enter-active-class 进入动画时要加载的类名 -->
      <!-- leave-active-class 离开动画时要加载的类名 -->
      <transition enter-active-class="animate__animated animate__bounce" leave-active-class="animate__animated animate__shakeX">
          <div class="box" v-if="show">thgfugjcgjhgc</div>
      </transition>
      <button @click="show = !show">显示/隐藏</button>

  </div>
</template>

<script>
export default {
    data(){
        return{
            show:false
        }
    }

}
</script>

<style scoped>
@import '../assets/animate.min.css';
.box{
    width: 300px;
    height: 300px;
    background-color: green;
}
</style>